<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {Server} from '@/stores/ajax';
import searchInput from '@/components/bbs/searchInput1.vue'
import {useRouter, useRoute} from 'vue-router'
import {Delta} from '@vueup/vue-quill'
import MyQuill from '@/components/quillComponent.vue'
import {GetUserState} from '@/stores/userState';
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
import {
    ArrowLeft,
} from '@element-plus/icons-vue'
import postInputArea from '@/components/bbs/postInputArea1.vue';
import commentList from '@/components/bbs/CommentList1.vue'
import * as cheerio from 'cheerio'

import {component as v} from "v-viewer"
import {ServerUtils} from '@/serverUtils';
let route = useRoute()
let pid = route.params['postid']
let to = Number(route.params['to'])

let editor = $ref<any>()
let user = GetUserState()
let content = $ref<Delta>(new Delta())

const getQuillHTML = (editor: any) => {
    return new QuillDeltaToHtmlConverter(editor.getContents().ops, {}).convert()
}

let commentingPost = $ref<any>({})
const handleComment = (post: any) => {
    if (post.pid != commentingPost.pid && commentEditor) commentEditor.setContents(new Delta())
    nextTick(() => {
        commentingPost = post
        commentVisible = true
    })
}
let maxPostWordsLength = 150
const handleCommentCommit = async () => {
    await ServerUtils.comment(commentEditor, post.value.pid, 5, maxPostWordsLength).then(() => {
        refresh()
    })
}
const handleCollect = async (post: any) => {
    await handleChangeRelationship(post, 'collect')
}
const handleStar = async (post: any) => {
    await handleChangeRelationship(post, 'star')
}
const handleChangeRelationship = async (post: any, relationship: string) => {
    // console.log(post[relationship])
    let flag = !post[relationship].includes(user.uid + '')
    await Server.get('/post/change_relationship', {
        pid: post.pid, relationship, value: flag
    }, true)
    if (!flag) {
        post[relationship] = post[relationship].filter((item: string) => item != String(user.uid))
        if (post[relationship + '_count'] != undefined) {
            post[relationship + '_count']--
        }
    } else {
        post[relationship].push(String(user.uid))
        if (post[relationship + '_count'] != undefined) {
            post[relationship + '_count']++
        }
    }
}

// let forwardVisible = $ref(false)
// let forwardEditor = $ref<any>()
// const handleForward = (post: any) => {
//     if (forwardEditor && post.pid != forwardingPost.pid) forwardEditor.setContents(new Delta())
//     forwardingPost = post
//     forwardVisible = true
// }
// let forwardingPost = $ref<any>()
// const handleForwardCommit = async () => {
//     // TODO 
// }
const post = ref<any>({})
let loadfail = ref(false)
const refresh = async () => {
    await ServerUtils.getPosts(null,Number(pid),null, ['collect', 'star'], 1, 100).then(res => {
        console.log(res)
        let _post = res?.list[0]
        if (_post) {
            // handle pictures
            const $_ = cheerio.load(_post.content, null, false)
            console.log($_.html())
            let img = $_('img')
            _post.images = []
            for (let i of img) {
                _post.images.push(i.attribs['src'])
                // i.attribs['width'] = '100'
            }
            _post.content = $_.html()
            post.value = _post
        } else {
            loadfail.value = true
        }
    })
}
refresh()
window.scrollTo(0, 0)
let commentVisible = $ref(false)
let commentEditor = $ref<any>()

const comments = ref()
</script>
<!-- }}} -->

<template>
    <div class="fvs card-block post-main">

        <el-button :icon="ArrowLeft"
            style="border-width: 0;justify-content: start;width: 90px;color: #999;"
            color="#fff0" text
            @click="$router.go(-1)">返回
        </el-button>
        <div class="fhs post-block">
            <!-- post : {{ pid}} -->

            <div v-if="post.pid"
                class="post-item-wrapper fvs">
                <div class="post-avatar-area">
                    <div class="post-avatar fhs">
                        <el-avatar :size="50"
                            :src="Server.fileBaseURL + post.user.avatar" />
                        <div class="post-username">{{
                                post.user.user_name
                        }}</div>
                    </div>
                </div>
                <div class="post-rightside-wrapper fhs">

                </div>
                <div class="post-content">
                    <v class="viewer">
                        <div
                            v-dompurify-html="post.content" />
                    </v>
                    <!-- <QuillEditor theme="bubble" :read-only="true" v-model:content="item.content" /> -->
                </div>

                <div class="baseline fhs" style="">
                    <div @click="handleCollect(post)">收藏 {{
                            post.collect?.length || ''
                    }}</div>
                    <div @click="handleStar(post)">点赞{{
                            post.star?.length || ''
                    }}</div>
                    <!-- <div @click="handleForward(item)">转发</div> -->
                </div>
            </div>
            <el-skeleton v-else-if="!loadfail" :rows="5"
                animated />
            <div class="tip-fail" v-else>
                找不到动态
            </div>
        </div>

        <div class="comment" v-if="post && post.user">
            <postInputArea @publish="comments.refresh()" 
                :pid="post.pid"
                :placeholder="`评论 ${post.user.user_name} :`" />
            <div class="comment-list">
                <label class='label1'>评论</label>
                <commentList :ppid='post.pid' ref='comments' :roll-to-pid="to">
                </commentList>
            </div>
            <!-- <ul class="comment-list" style=""> -->
            <!--     <li v-for="item in post?.comments as any" -->
            <!--         class="fvs"> -->
            <!--         <div class="fh" -->
            <!--             style="justify-content: start;"> -->
            <!--             <div style="margin:10px 20px;"> -->
            <!--                 <el-avatar :size="50" -->
            <!--                     :src="Server.fileBaseURL + item.user.avatar" /> -->
            <!--             </div> -->
            <!--             <div class="fv" -->
            <!--                 style="justify-content: start;"> -->
            <!--                 <div style="padding: 5px 0" -->
            <!--                     class="fontsizes3"> -->
            <!--                     <div class="fh" -->
            <!--                         style="justify-content:start;"> -->
            <!--                         <div class="bold1">{{ -->
            <!--                                 item.user.user_name -->
            <!--                         }} -->
            <!--                         </div> -->
            <!--                     </div> -->
            <!--                 </div> -->
            <!--                 <div class="fontsizes2" -->
            <!--                     style="margin-right: 20px;"> -->
            <!--                     <v class="viewer"> -->
            <!--                         <div -->
            <!--                             v-dompurify-html="item.content" /> -->
            <!--                     </v> -->
            <!--                     <!-1- <QuillRead @ready="uazi($event)" :content="item.content" /> -1-> -->
            <!--                 </div> -->
            <!--                 <div class="fh fontsizes2" -->
            <!--                     style="justify-content: start; gap: 20px; margin: 10px 0;"> -->
            <!--                     <div -->
            <!--                         @click="handleComment(item)"> -->
            <!--                         评论</div> -->
            <!--                     <div @click="handleCollect"> -->
            <!--                         收藏</div> -->
            <!--                 </div> -->
            <!--             </div> -->
            <!--         </div> -->
            <!--     </li> -->
            <!-- </ul> -->
        </div>
    </div>

</template>

<style scoped lang="scss">
.ql-bubble .ql-editor {
    padding: 0;
}

.card-block {
    background-color: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-lighter);
    border-radius: 4px;
}

.post-main {
    flex-basis: 800px;
    min-width: 600px;
    margin-right: 8px;
    padding: 16px 12px 0;

    .post-block {
        margin: 5px 0px;
        padding: 0 20px;
        /* background-color: #def; */
        border-radius: 4px;

        .post-avatar {
            margin: 10px 20px 10px 0;

        }


        .post-username {
            margin: 4px 20px 0;
            font-size: 24px;
            font-weight: bold;
        }

        .post-content {
            font-size: 16px;
            margin: 10px 0 20px;
        }
    }

    .baseline {
        justify-content: start;
        gap: 20px;
        margin: 10px 0;
        font-size: 14px;
        color: #666;
    }

    .comment-list {
        margin: 0px 8px 110px;

        .label1 {
            display: block;
            font-size: 24px;
            margin-left: 10px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            font-weight: bold;
            letter-spacing: 10px;
            color: #666;
            border-bottom: 1px #ddd solid;
        }
    }

    .comment-area {
        .avatar {
            margin: 10px 20px;
        }

        .rightside {
            flex-grow: 1;
        }

        .text-area {
            margin-right: 20px;
            height: 160px;
        }

        .b-post {
            margin: 8px 0 30px;
            font-size: 16px;
            max-width: 100px;
            letter-spacing: 10px;
        }

        .b-post.b-post {
            text-indent: -10px;
            direction: rtl;
        }
    }
}

.hover__g:hover {
    background-color: #f4f4f4;
}
</style>
<style>
.post-content img {
    max-width: 100% !important;
}
</style>
